@charset "utf-8"

.user-panel.box
  padding: 0
  position: relative

$pic-height: 80px

.user-pic
  height: $pic-height
  background-image: url("img/pic.webp")
  background-size: cover
  background-position: center 0
  border-radius: 4px

$head-size: 56px
$head-left: 14px

.user-head
  max-width: $head-size
  max-height: $head-size
  border-radius: 50%

  // overflow: hidden
  position: absolute
  top: $pic-height - math.div($head-size, 3)
  left: $head-left

.post-head img, .user-head, .cmt .avatar
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1)
  border: 2px solid #fff

.user-name
  font-size: 0.95rem
  display: inline-block
  margin-left: $head-left + $head-size + 8px
  margin-top: 3px

.user-info
  height: 92px
  display: flex

  a
    flex-direction: column
    flex-grow: 1

  span
    font-weight: bold

    &.num
      color: $link-hover
      font-size: 0.87rem

    &.text
      color: $grey

  a:hover .text
    color: $link-hover

.user-about
  li
    padding: 10px 0
    letter-spacing: 1px
    font-size: 15px
    border-bottom: 1px solid #f0f0f0

    i
      margin-right: .3em
